<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"  
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"> 
<head>
<title>bootStrap test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="/bootStrap/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="/bootStrap/css/bootstrap-table.min.css" type="text/css" />
<script th:src="@{/bootStrap/js/jquery-3.2.1.min.js}"></script>
<script th:src="@{/bootStrap/js/bootstrap.min.js}"></script>
<script th:src="@{/bootStrap/js/bootstrap.js}"></script>
<script th:src="@{/bootStrap/js/bootstrap-table.min.js}"></script>
<script th:src="@{/bootStrap/js/bootstrap-table-zh-CN.min.js}"></script>
<script th:src="@{/js/hello.js}"></script>
</head>
<body>
	<div class="panel panel-default">
		<div class="panel-heading">查询条件</div>
		<div class="panel-body form-group" style="margin-bottom: 0px;">
			<label class="col-sm-1 control-label"
				style="text-align: right; margin-top: 5px">姓名：</label>
			<div class="col-sm-2">
				<input type="text" class="form-control" name="name" id="name" />
			</div>
			<label class="col-sm-1 control-label"
				style="text-align: right; margin-top: 5px">手机号：</label>
			<div class="col-sm-2">
				<input type="text" class="form-control" name="Name" id="search_tel" />
			</div>
			<div class="col-sm-1 col-sm-offset-4">
				<button class="btn btn-primary" id="search_btn">查询</button>
			</div>
		</div>
	</div>
	<table id="test-table" class="table table-hover"></table>
	<div id="toolbar" class="btn-group pull-right"
		style="margin-right: 20px;">
		<button id="btn_edit" type="button" class="btn btn-default"
			style="border-radius: 0">
			<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
		</button>
		<button id="btn_delete" type="button" class="btn btn-default"
			>
			<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
		</button>
		<button id="btn_add" type="button" class="btn btn-default">
			<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
		</button>
	</div>
</body>
<script type="text/javascript">
	$(document).ready(function() {
		//initTable();
	})
	var $table = $('#test-table');
	$table.bootstrapTable({
				method : "post",
				contentType : "application/x-www-form-urlencoded",//必须要有！！！！
				striped : true, //是否显示行间隔色
				cache : false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*） 
				queryParamsType : 'limit',//查询参数组织方式
				queryParams : queryParams,//请求服务器时所传的参数
				showRefresh : true,//刷新按钮
				showColumns : true,
				clickToSelect : true,//是否启用点击选中行
				toolbarAlign : 'right',//工具栏对齐方式
				buttonsAlign : 'right',//按钮对齐方式
				toolbar : '#toolbar',
				pagination : true, //是否显示分页（*） 
				sortable : true, //是否启用排序 
				sortOrder : "id desc", //排序方式 
				pageNumber : 1, //初始化加载第一页，默认第一页 
				pageSize : 10, //每页的记录行数（*） 
				pageList : [ 20, 50, 100, 150 ], //可供选择的每页的行数（*）
				url : "/user/getUserInfo",
				dataType : "json",
				singleSelect : false,
				search : true, //显示搜索框
				sidePagination : "server", //服务端处理分页
				columns : [
						{
							title : '全选',
// 							field : 'id',
							//复选框
							checkbox : true,
							width : 25,
							align : 'center',
							valign : 'middle'
						},
						{
							title : 'id',
							field : 'id',
							align : 'center',
							valign : 'middle',
							width:80,
						},
						{
							title : ' 姓名',
							field : 'name',
							align : 'center',
							valign : 'middle',
							width:80,
						},
						{
							title : '年龄',
							field : 'age',
							align : 'center',
							width:80,
						},
						{
							title : '操作',
							field : 'id',
							align : 'center',
							width:180,
							formatter : function(value, row, index) {
								var e = '<button class="btn btn-warning" onclick="edit('+ row.id + ' );">修改</button> ';
								var d = '<button class="btn btn-warning" onclick="del('+ row.id + ' );">删除</button> ';
								return e + d;
							}
						} ]
			});

	function edit(id) {
		alert(id);
	}

	function del(id) {
		alert(id);
	}

	//请求服务数据时所传参数
	function queryParams(params) {
		return {
			//每页多少条数据
			pageSize : params.limit,
			//请求第几页
			pageIndex : params.pageNumber,
			name : $('#name').val(),
			Tel : $('#search_tel').val()
		}
	}
	//查询按钮事件
	$('#search_btn').click(function() {
		$('#mytab').bootstrapTable('refresh', {
			url : '/user/getUserInfo'
		});
	})

	//根据窗口调整表格高度
	// $(window).resize(function() {
	//     $('#mytab').bootstrapTable('resetView', {
	//         height: tableHeight()
	//     })
	// })
</script>
</html>
